<template>
    <div class="electricnjr">
        <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <router-link to="/index/first/device" slot="title" tag="span" v-if="bindon"><strong>素士X5</strong>
        <i class="el-icon-arrow-right"></i>
        </router-link>
        <router-link to="/index/first/bindon" slot="title" tag="span" v-else><el-badge is-dot>请绑定牙刷</el-badge>
        <i class="el-icon-arrow-right"></i>
        </router-link>
        <span slot="more">
            <el-button @click="saveinfo" v-show="saveif&&bindon">保存</el-button>
        </span>
        </LoginHeader>
        <el-divider></el-divider>
        <div class="userinfo_item">
            <img src="@/assets/njrpic/firstpic/pattern_battery_img.png" alt="">
            <span>剩余电量</span>
            <el-progress :percentage="29" v-if="bindon"></el-progress>
            <el-progress :percentage="0" v-else></el-progress>
        </div>
        <el-divider></el-divider>
        <div class="userinfo_item" style="border-bottom:1px solid #f4f4f4">
            <img src="@/assets/njrpic/firstpic/ic_device_toothbrush_time.png" alt="">
            <span>刷牙时长</span>
            <div class="ownswitch">
                <span :class="{active:!value1}" @click="choosetime1">2分钟</span>
                <span :class="{active:value1}" @click="choosetime2">2.5分钟</span>
            </div>
        </div>
        <div class="userinfo_item" style="border-bottom:1px solid #f4f4f4">
            <img src="@/assets/njrpic/firstpic/pattern_awaken_img.png" alt="">
            <span>抬起唤醒</span>
            <div :class="{myswitch:true,myswitchactive:wakebtn}">
                <span :class="{active:!wakebtn}" @click="wake1">关闭</span>
                <span :class="{active:wakebtn}" @click="wake2">开启</span>
            </div>
        </div>
        <div class="userinfo_item">
            <img src="@/assets/njrpic/firstpic/ic_device_mode_shake.png" alt="">
            <span>防止溅洒</span>
            <div :class="{myswitch:true,myswitchactive:wake1btn}">
                <span :class="{active:!wake1btn}" @click="avoid1">关闭</span>
                <span :class="{active:wake1btn}" @click="avoid2">开启</span>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="addstyle">
            <p>附加模式</p>
            <div>
                <p>{{model}}</p>
        <i slot="title" :class="{'el-icon-arrow-down':true,'slidedown':show==true,'rotateback':show==false}" @click="rotateshow"></i>
            </div>
        </div>
      <el-collapse-transition>
        <div v-show="show">
            <div :class="{userinfo_item:true,color_no:!item.value}" v-for="(item,index) in addlist" :key="index" style="border-bottom:1px solid #f4f4f4">
            <img :src="item.actpic" alt="" v-if="item.value">
            <img :src="item.pic" alt="" v-else>
            <div>
                <p>{{item.title}}</p>
                <p>{{item.word}}</p>
            </div>
            <el-switch  v-model="item.value"  active-color="#5a22c5" @change="changeitem(index)"></el-switch>
        </div>
        </div>
      </el-collapse-transition>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            value1:true,
            show:false,
            wakebtn:true,
            wake1btn:true,
            saveif:false,
            bindon:true,
            addlist:[
                {actpic:'',pic:'',title:'增强美白',word:'延长30秒增强美白',value:false},
                {actpic:'',pic:'',title:'延长按摩',word:'延长30秒牙龈按摩',value:false},
                {actpic:'',pic:'',title:'舌苔清洁',word:'延长10秒舌苔清洁',value:false},
            ],
            model:'标准模式'
        }
    },
    mounted(){
        this.$http.get('/api/users/'+this.$store.state.username)
        .then(({
            data,config
        })=>{
            if(data.code==200){
                this.$store.commit('getId',data.data.id)
                    this.wakebtn=(data.data.wake==0)?false:true;
                    this.value1=(data.data.brushtime==0)?false:true;
                    this.wake1btn=(data.data.avoid==0)?false:true;
            }else{
                this.$message.error('获取信息失败')
            }
        })
        this.bindon=this.$store.state.bindon
    },
    methods:{
        goback(){
            this.$router.push('/index/first')
        },
        rotateshow(){
            this.show=!this.show
        },
        changeitem(index){
            // console.log(this.addlist[index].value,index);
            if(this.addlist[index].value){
                this.addlist.forEach(i=>{
                    i.value=false
                })
                this.addlist[index].value=true
                this.model=this.addlist[index].title
            }
        },
        saveinfo(){
            this.$http.put('/api/users/'+this.$store.state.id,{wake:this.wakebtn,brushtime:this.value1,avoid:this.wake1btn})
            .then(({
                data,config
            })=>{
                if(data.code==200){
                    this.$message.success('保存信息成功')
                }else{
                    this.$message.error('保存信息失败')
                }
            })
        },
        choosetime1(){
            this.value1=false
            this.saveif=true
        },
         choosetime2(){
            this.value1=true
            this.saveif=true
        },
        wake1(){
            this.wakebtn=false
            this.saveif=true
        },
        wake2(){
            this.wakebtn=true
            this.saveif=true
        },
         avoid1(){
            this.wake1btn=false
            this.saveif=true
        },
        avoid2(){
            this.wake1btn=true
            this.saveif=true
        }
    },
    components:{
        LoginHeader
    }
}
</script>
<style lang="less" scoped>
.electricnjr{
.el-button{
    background-color: #5b20c4;
    color: white;
    border-radius: 15px;
}
.userinfo_item{
    display: flex;
    align-items: center;
    padding: 15px;
    img{
        width: 10%;
        margin-right: 25px;
    }
    img+div{
        flex: 4;
    }
   span{
       flex: 4;
   }
   .ownswitch{
       background-color: #7c45f3;
       color: white;
       padding: 5px 5px;
       border-radius: 35px;
       span{
           padding: 8px 15px;
           display: inline-block;
            border-radius: 35px;
       }
   }
    .active{
           background-color: white;
           color:  #7c45f3;
           transition: all 0.3s;
       }
   .myswitch{
       background-color: #cfcfcf;
        color: white;
       padding: 5px 5px;
       border-radius: 35px;
        span{
           padding: 8px 25px;
           display: inline-block;
            border-radius: 35px;
       }
   }
   .myswitchactive{
       background-color: #7c45f3;
   }

   i{
       color: #a485e7;
   }
}
.userinfo_item:nth-of-type(2){
    border-bottom: 5px solid #f4f4f4;
}
.el-divider{
    height: 10px;
    background-color: #efefef;
    margin: 0;
}
.addstyle{
    display: flex;
    justify-content: space-between;
    padding: 15px 15px;
    // background-color: violet;
    text-align: center;
    align-items: center;
    div{
        p{
            color: #a288e5;
        }
        i{
            color: #b7b7b7;
        }
    }
}
 .slidedown{
        transition: all 0.5s;
        transform: rotate(180deg);
    }
    .rotateback{
        transition: all 0.5s;
    }
}
.color_no{
    background-color: #d1d1d1;
    color: #a2a1a1;
    border-bottom:1px solid #f4f4f4
}
</style>
<style lang="less" >
.electricnjr{
    .el-progress-bar__outer{
    height:25px;
    }
.el-progress__text {
    font-size: 12px;
    margin-left:0;
}
.el-progress-bar{
    padding-right: 0;
     margin-right: 0;
}
 .el-switch__core {
    margin: 0;
    position: relative;
    width: 0.53333rem;
    height: 0.56667rem;
    border: 0.01333rem solid #DCDFE6;
    outline: 0;
    border-radius: 0.53333rem;
    box-sizing: border-box;
    background: #DCDFE6;
    transition: border-color .3s,background-color .3s;
    vertical-align: middle;
}
.el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -0.52667rem;
}
.el-switch__core:after {
    content: "";
    position: absolute;
    top: 0.01333rem;
    left: 0.033rem;
    border-radius: 100%;
    transition: all .3s;
    width: 0.51333rem;
    height: 0.51333rem;
    background-color: #FFF;
}
}
</style>